<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ title }}</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">

    <style type="text/css" media="all">
{% include 'summary.css' %}
{# Calculate size of table selection elements so that they take up whole space #}
.table-select li {
  width: calc(100% / {{ tables.keys() | length }});
}
    </style>
  </head>
  <body>
    {# Loading symbol that gets hidden after initialisation of all tables #}
    <div class="loading lds-dual-ring"></div>

    {# Bar for selecting the current data table #}
    <div class="table-select">
      <ul>
        {% for id, name in names.items() %}
          <li id='{{ id }}-button'><a href="#">{{ name }}</a></li>
        {% endfor %}
      </ul>
      {# <hr/> #}
    </div>

    {# Display of the current data table #}
    <div class="tables-wrapper">
      {% for id, table in tables.items() %}
        {# Hide tables not to show them before all DataTables are loaded #}
        <div id="{{ id }}-div" style="display: none;">
          {{ table }}
        </div>
      {% endfor %}
    </div>
  </body>

  <footer id="footer">
    <a href="https://github.com/enjoy-digital/litedram">LiteDRAM</a> is a part of <a href="https://github.com/enjoy-digital/litex">Litex</a>.
    <br>
    Generated using
    <a href="https://github.com/enjoy-digital/litedram/blob/{{ revision }}/{{ script_path }}">{{ script_path }}</a>,
    revision
    <a href="https://github.com/enjoy-digital/litedram/commit/{{ revision }}">{{ revision_short }}</a>,
    {{ generation_date }}.
  </footer>

  {# Script last, so that for large tables we get some content on the page before loading tables #}
  <script>
    {# Ids of the data tables #}
    table_ids = [
      {% for id in tables.keys() %}
        '{{ id }}',
    {% endfor %}
    ];

    {# Show table with given id and hide all the others #}
    show_table = function(id) {
      if (!table_ids.includes(id)) {
        console.log('Error: show_table(' + id + ')');
        return;
      }
      for (var table_div of $('.tables-wrapper').children()) {
        if (table_div.id) {
          var table_div = $('#' + table_div.id)
          if (table_div.attr('id') == id + '-div') {
            table_div.show();
          } else {
            table_div.hide();
          }
        }
      }
    }

    // sort human-readable values assuming format "123 Kb", only first letter of unit is used
    jQuery.fn.dataTable.ext.type.order['file-size-pre'] = function(data) {
      var matches = data.match(/^(\d+(?:\.\d+)?)\s*(\S+)/i);
      var multipliers = {
        k: Math.pow(2, 10),
        m: Math.pow(2, 20),
        g: Math.pow(2, 30),
        t: Math.pow(2, 40),
      };

      if (matches) {
        var float = parseFloat(matches[1]);
        var prefix = matches[2].toLowerCase()[0];
        var multiplier = multipliers[prefix];
        if (multiplier) {
          float = float * multiplier;
        }
        return float;
      } else {
        return -1;
      };
    };

    {# Initialization after DOM has been loaded #}
    $(document).ready(function() {
      // generate data tables
      for (var id of table_ids) {
        // add human readable class to all bandwidth columns
        var columns = $('#' + id + ' > thead > tr > th').filter(function(index) {
          var name = $(this).text().toLowerCase();
          return name.includes('bandwidth') || name.includes('latency') || name.includes('efficiency');
        });
        columns.addClass('data-with-unit-human-readable');

        // construct data table
        table = $('#' + id);
        table.DataTable({
          paging: false,
          fixedHeader: true,
          columnDefs: [
            { type: 'file-size', targets: [ 'data-with-unit-human-readable' ] },
            { className: 'dt-body-right', targets: [ '_all' ] },
            { className: 'dt-head-center', targets: [ '_all' ] },
          ]
        });
        table.addClass("stripe");
        table.addClass("hover");
        table.addClass("order-column");
        table.addClass("cell-border");
        table.addClass("row-border");
      }

      // add click handlers that change the table being shown
      for (var id of table_ids) {
        var ahref = $('#' + id + '-button a');
        // use nested closure so that we avoid the situation
        // where all click handlers end up with the last id
        ahref.click(function(table_id) {
          return function() {
            // get rid of this class after first click
            $('.table-select a').removeClass('table-select-active');
            $(this).addClass('table-select-active');
            show_table(table_id);
          }
        }(id))
      }

      // show the first one
      $('#' + table_ids[0] + '-button a:first').click();

      // hide all elements of class loading
      $('.loading').hide();
    });
  </script>
</html>
{# vim: set ts=2 sts=2 sw=2 et: #}
